"use strict";
import React from "react";
import { ArrowUpOutlined, ArrowDownOutlined } from "@ant-design/icons";

import styles from "./index.less";

/*
 * 组件注释
 * create by wuqiong
 * creation time 2021/06/16
 *
 * */

const Index = (props) => {
  const {
    total,
    totalShare,
    current,
    currentShare,
    text = ["月环比", "月环比"],
    title = "成果",
  } = props;

  return (
    <div className={styles.dataChangeTip}>
      <div className={styles.layout_box}>
        <div>
          <p style={{ fontWeight: 700 }}>{title}累计总量</p>
          <p>
            <span
              className={styles.title}
              style={{ color: totalShare >= 0 ? "red" : "green" }}
            >
              {total}
            </span>
            <span>
              {text[0]}
              <span>
                {totalShare >= 0 ? (
                  <ArrowUpOutlined
                    style={{ color: "red" }}
                    className={styles.icon}
                  />
                ) : (
                  <ArrowDownOutlined
                    style={{ color: "green" }}
                    className={styles.icon}
                  />
                )}
              </span>
              {totalShare ? `${totalShare * 100}%` : "0%"}
            </span>
          </p>
        </div>
        <div>
          <p style={{ marginTop: 40, fontWeight: 700 }}>本月新增</p>
          <p>
            <span
              className={styles.title}
              style={{ color: currentShare >= 0 ? "red" : "green" }}
            >
              {current}
            </span>
            <span>
              {text[1]}
              <span>
                {currentShare > 0 ? (
                  <ArrowUpOutlined
                    style={{ color: "red" }}
                    className={styles.icon}
                  />
                ) : (
                  <ArrowDownOutlined
                    style={{ color: "green" }}
                    className={styles.icon}
                  />
                )}
              </span>
              {currentShare ? `${currentShare * 100}%` : "0%"}
            </span>
          </p>
        </div>
      </div>
    </div>
  );
};
export default Index;
